<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { onBeforeRouteLeave, useRoute } from 'vue-router';
import { useRouterPush } from '@/hooks/common/router';
import { generateRandomCode } from '@/utils/utils';
import ResultOverview from '@/views/duplicate-check/check-result/modules/result-overview.vue';
import ExceptionOverview from '@/views/duplicate-check/check-result/modules/exception-overview.vue';
import { getBidCompareUnitAction } from '@/service/api';

const { routerBack, routerPushByKey } = useRouterPush();
const { query } = useRoute();

const currentIndex = ref<number>(0);

const showLoading = ref<boolean>(true);
const loadingDes = ref<string>('数据获取中，请稍后...');

// 创建类型：1.创建；2.非创建
const createType = ref<number>(Number(query.createType));
const logId = ref<number>(Number(query.logId));
const compareName = ref<string>(String(query.compareName));

onMounted(() => {
  getCompareResultAction();
});

const resultList = ref([
  {
    id: generateRandomCode(3, 'num'),
    bidUnit: '结果总览',
    totalErrorNumber: 0
  }
]);

const compareData = ref<any>({});

// 获取文档比对结果
async function getCompareResultAction() {
  const params: any = {
    logId: logId.value
  };
  showLoading.value = true;
  const { data, error } = await getBidCompareUnitAction(params);
  if (!error) {
    compareData.value = data;

    resultList.value = [...resultList.value, ...compareData.value.list];
  }
  showLoading.value = false;
}

const newCompareData = ref<any>({});

// 结果列表点击事件
function resultListClick(index: number) {
  if (currentIndex.value === index) return;
  currentIndex.value = index;

  const newData: any = JSON.parse(JSON.stringify(compareData.value));
  newData.list.splice(index, 1);
  newCompareData.value = newData;
}

// 查看数据详情
function viewDetailClickHandle(index: number) {
  currentIndex.value = index;

  const newData: any = JSON.parse(JSON.stringify(compareData.value));
  newData.list.splice(index, 1);
  newCompareData.value = newData;
}

const isBack = ref<boolean>(false);

// 返回首页
function backHomeClick() {
  if (createType.value === 1) {
    routerPushByKey('root');
  } else {
    routerBack();
  }
}

onBeforeRouteLeave((to, from, next) => {
  isBack.value = true;
  next();
});
</script>

<template>
  <div class="document-layout min-h-500px flex-col-stretch gap-16px lt-sm:overflow-auto">
    <div class="content-header">
      <span class="header-title">小主，你的检测任务已完</span>
      <NButton class="back-btn" quaternary @click="backHomeClick">
        <template #icon>
          <img src="@/assets/smart-eye/icon-back.png" width="20" alt="" />
        </template>
        返回
      </NButton>
    </div>
    <NSpin :show="showLoading" :description="loadingDes" :rotate="false" size="large">
      <template #icon>
        <img src="@/assets/imgs/spin-loading.gif" alt="" width="240" height="240" />
      </template>
      <div class="container-box">
        <div class="result-box flex flex-row">
          <div class="result-list-box">
            <div
              v-for="(item, index) in resultList"
              :key="item.bidUnit + index"
              class="result-item"
              :class="currentIndex === index ? 'result-item-active' : ''"
              @click="resultListClick(index)"
            >
              <span v-if="index === 0" class="result-title" :class="currentIndex === index ? 'result-title-active' : ''">
                结果总览
              </span>
              <div v-if="index !== 0" class="flex-row items-center">
                <span class="result-title" :class="currentIndex === index ? 'result-title-active' : ''">投标单位{{index}}(</span>
                <span class="result-num">{{ item.totalErrorNumber }}</span>
                <span class="result-title" :class="currentIndex === index ? 'result-title-active' : ''">)个异常</span>
              </div>
            </div>
          </div>
          <div class="result-content-box">
            <ResultOverview
              v-if="currentIndex === 0"
              :compare-name="compareName"
              :compare-data="compareData"
              @view-detail-click="viewDetailClickHandle"
            />
            <ExceptionOverview
              v-else
              :file-number="currentIndex - 1"
              :compare-name="compareName"
              :compare-data="newCompareData"
            />
          </div>
        </div>
      </div>
    </NSpin>
  </div>
</template>

<style scoped lang="scss">
.bg-layout {
  padding: 16px 16px 0 !important;
  background: url('@/assets/imgs/edit-bg.png');
  background-size: 100% 100%;
}
.content-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  width: 100%;
  padding: 0 30px;
  .header-title {
    font-weight: bold;
    font-size: 32px;
    color: #333333;
    line-height: 48px;
  }
  .back-btn {
    width: 120px;
    height: 48px;
    font-size: 18px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
    border: 1px solid #faf9fd;
  }
}
.container-box {
  margin: 0 30px;
  padding: 32px 32px 0;
  //height: 751px;
  min-height: 751px;
  //overflow: hidden;
  background: rgba(229, 231, 253, 0.6);
  border-radius: 12px 12px 0px 0px;
  border: 1px solid #faf9fd;
  .result-box {
    min-height: 719px;
    background: white;
    border-radius: 12px 12px 0px 0px;
    .result-list-box {
      display: flex;
      flex-direction: column;
      flex: 1;
      width: 260px;
      border-right: 1px solid #ebeef5;
      padding: 37px 0;
      .result-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0 18px;
        cursor: pointer;
      }
      .result-title {
        font-weight: 400;
        font-size: 20px;
        color: #333333;
        line-height: 48px;
      }
      .result-num {
        font-weight: 400;
        font-size: 20px;
        color: #ff7575;
        line-height: 48px;
      }
      .result-item-active {
        background: #e8ecfd;
      }
      .result-title-active {
        color: #806cfe;
      }
    }
    .result-content-box {
      height: 100%;
      width: calc(100% - 260px);
    }
  }
}
:deep(.n-spin) {
  width: auto;
  height: auto;
}
</style>
